<template>
    <div class="order-goods">
        <div class="goods-all" v-for="(item, index) in orderGoods" :key="index">
            <div class="goods-content">
                <img :src="item.pic">
                <div class="goods-body">
                    <div class="top">
                        <div class="goods-name">{{item.name}}</div>
                        <div class="goods-price" v-if="type === 2">零钱：{{item.price | moneyFmt(2, '')}}</div>
                        <div class="goods-price" v-else>{{item.price | moneyFmt(2, '￥')}}</div>
                    </div>
                    <div class="middle">
                        <div class="goods-title">{{item.title}}</div>
                        <div class="goods-num">x{{item.num}}</div>
                    </div>
                    <div class="bottom">
                        <div class="goods-spec">规格：{{item.tags}}</div>
                        <div class="sev" v-if="item.isup == 1">7天无理由退货</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "order-goods",
    props: {
        orderGoods: {
            type: Array
        },
        type: {
            type: Number
        }
    },
    data() {
        return {
            remarkShow: false
        }
    },
    methods: {
        addRemark() {
            this.remarkShow = !this.remarkShow
        }
    },
    created() {
    }
}
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
@import '~@/assets/main.styl';

.goods-all {
    margin-bottom: cellPadding;
}

.goods-content {
    padding: smallMargin cellPadding;
    height: vw(60);
    display: flex;
    position: relative;
    align-items: center;

    /* border-bottom 1px solid #f8f8f8 */
    img {
        width: vw(60);
        height: vw(60);
    }

    .goods-body {
        position: relative;
        height: vw(60);
        padding-left: smallMargin;
        flex: 1;

        .top {
            display: flex;
            justify-content: space-between;
            font-size: word14;
            line-height: vw(19);

            .goods-name {
                color: gray3;
            }

            .goods-price {
                color: main-color;
            }
        }

        .middle {
            display: flex;
            justify-content: space-between;
            height: vw(16);

            .goods-title {
                word-vw(word12, gray9);
                line-height: vw(16);
            }

            .goods-num {
                color: gray9;
                font-size: word12;
            }
        }

        .bottom {
            display: flex;
            justify-content: flex-start;
            margin-top: smallMargin;
            line-height: vw(16);
            font-size: word12;

            .goods-spec {
                color: gray6;
            }

            .goods-remark {
                color: gray6;

                .expandmore {
                    width: vw(8);
                    height: vw(5);
                }
            }

            .sev {
                word-vw(12px, main-color);
                margin-left: 2vw;
                border: 1px solid main-color;
                border-radius: all-radius;
                line-height: vw(17);
                padding: 0 2vw;
            }
        }
    }
}

.remark-show {
    /* border 1px solid slateblue */
    /* margin-top smallMargin */
    margin-left: 0;
    display: flex;
    justify-content: flex-start;

    .remark {
        border: none;
        width: 100vw;
        height: vw(100);
        word-vw(word12, gray9);
        line-height: vw(16);
        margin-top: smallMargin;
        background-color: grayF;
        box-sizing: border-box;
        padding: vw(10);
    }
}
</style>
